@charset "utf-8";

/* CSS Document */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

fieldset,
img {
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 12px;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
}


[v-cloak]{
  display: none;
}

html,body,#app{
  height: 100%;
  /* background: #152442; */
}
.content{
  position: relative;
  height: 100%;
}
.content .personBox{
  /* display: flex;
  flex-wrap: wrap;
  align-content: space-between; */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 1560px;
  height: 550px;
}

.content .personBox .personItem{
  width: 120px;
  height: 120px;
  position: absolute;
}

.content .personBox .personItem .num{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 22px;
  background: #eee;
  border-radius: 4px;
  position: absolute;
  /* top: 40px; */
  z-index: 0;
}
.content .personBox .personItem .styleBox{
  position: relative;
  color: #fff;
}
.content .personBox .personItemReverse {
  
}
.content .personBox .personItem .imgBox{
  position: relative;
  z-index: 999;
}
.content .personBox .personItem .imgBox img{
  width: 65px;
  height: 65px;
  z-index: 999;
  position: absolute;
}

.positionBox{
  position: absolute;
  background: #ccc;
  width: 4px;
  height: 4px;
  opacity: 0;
} 
.lineBox{
  width: 1437px;
  height: 175px;
  border: 4px solid #ccc;
  top: 160px;
  left: 34px;
  position: absolute;
}

.lineOne{
  /* width: 1400px; */
  height: 130px;
  /* border: 4px solid #CCCFD9; */
  top: 183px;
  left: 51px;
  position: absolute;
  display: none;
}

.activeOne .dot{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  bottom: -70px;
  z-index: 9999;
  left: 27px;
  display: none;
}

.activeOne .dotBottom{
  bottom: 196px;
}

.activeOneIndexOne .dot{
  left: 40px!important;
  display: none;
}

.activeOneIndexTwo .dot{
  left: 13px!important;
  display: none;
}

.activeOneIndexThree .dotBottom{
  left: 35px!important;
}
.activeOneIndexFour .dotBottom{
  left: 8px!important;
}


.lineOneBottomLine{
  position: absolute;
  right: 0;
  bottom: 0;
  border-top: 4px solid #CCCFD9;
}

/* 第二条 */
.lineTwo{
  /* width: 125px; */
  height: 104px;
  /* border: 5px solid #ccc; */
  top: 197px;
  left: 62px;
  position: absolute;
  display: none;
}
.activeTwo .dotTwo{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  bottom: -85px;
  z-index: 9999;
  left: 27px;
  display: none;
}

.activeTwo .dotBottomTwo{
  bottom: 208px;
}

.activeTwoIndexOne .dotTwo{
  left: 49px!important;
  display: none;
}

.activeTwoIndexTwo .dotTwo{
  left: 1px!important;
  display: none;
}

.activeTwoIndexThree .dotBottomTwo{
  left: 45px!important;
}

.activeTwoIndexFour .dotBottomTwo{
  left: -4px!important;
}

/* 第三条 */

.lineThree{
  /* width: 125px; */
  height: 78px;
  /* border: 5px solid #ccc; */
  top: 211px;
  left: 73px;
  position: absolute;
  display: none;
}
.activeThree .dotThree{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  bottom: -99px;
  z-index: 9999;
  left: 27px;
  display: none;
}

.activeThree .dotBottomThree{
  bottom: 220px;
}

.activeThreeIndexOne .dotThree{
  left: 58px!important;
  display: none;
}

.activeThreeIndexTwo .dotThree{
  left: -9px!important;
  display: none;
}

.activeThreeIndexThree .dotBottomThree{
  left: 55px!important;
}

.activeThreeIndexFour .dotBottomThree{
  left: -16px!important;
}

/* 第四条 */
.lineFour{
  /* width: 125px; */
  height: 52px;
  /* border: 5px solid #ccc; */
  top: 225px;
  left: 84px;
  position: absolute;
  display: none;
}
.activeFour .dotFour{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  bottom: -113px;
  z-index: 9999;
  left: 27px;
  display: none;
}

.activeFour .dotBottomFour{
  bottom: 232px;
}

.activeFourIndexOne .dotFour{
  left: 67px!important;
  display: none;
}

.activeFourIndexTwo .dotFour{
  left: -22px!important;
  display: none;
}

.activeFourIndexThree .dotBottomFour{
  left: 65px!important;
}

.activeFourIndexFour .dotBottomFour{
  left: -28px!important;
}

/* 第五条 */

.lineFive{
  /* width: 125px; */
  height: 25px;
  /* border: 5px solid #ccc; */
  top: 239px;
  left: 94px;
  position: absolute;
  display: none;
}
.activeFive .dotFive{
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: red;
  bottom: -127px;
  z-index: 9999;
  left: 27px;
  display: none;
}

.activeFive .dotBottomFive{
  bottom: 244px;
}

.activeFiveIndexOne .dotFive{
  left: 76px!important;
  display: none;
}

.activeFiveIndexTwo .dotFive{
  left: -35px!important;
  display: none;
}

.activeFiveIndexThree .dotBottomFive{
  left: 75px!important;
}

.activeFiveIndexFour .dotBottomFive{
  left: -40px!important;
}
